<!DOCTYPE html>
<html lang="en" manifest="offline.manifest">
	<head>
		<meta charset=utf-8>
		<meta name="viewport"  content="width=device-width,initial-scale=1.0" />
		<title>And the winner isn't…</title>
		<script>
			document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/';
		</script>
		<link href="css/main.css" rel="stylesheet" />


	</head>

	<body>

		<div id="wrapper">
			<!-- the header and navigation -->
			<header role="banner">
				<div id="logo">
					And the winner is<span>n't...</span>
				</div>
				<nav role="navigation">
					<ul>
						<li>
							<a href="#">Why?</a>
						</li>
						<li>
							<a href="#">Synopsis</a>
						</li>
						<li>
							<a href="#">Stills/Photos</a>
						</li>
						<li>
							<a href="#">Videos/clips</a>
						</li>
						<li>
							<a href="#">Quotes</a>
						</li>
						<li>
							<a href="#">Quiz</a>
						</li>
					</ul>
				</nav>
			</header>
			<!-- the content -->
			<div id="content" role="main">

				<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
				<h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
				<p>
					that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?
				</p>
				<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" width="202" height="531" />
				<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
				<p>
					<i>We’re here to put things right.</i>
				</p>
				<a href="#">these should have won &raquo;</a>
			</div>
			<!-- the sidebar -->
			<aside>
				<section role="complementary">
					<div class="sideBlock unSung">
						<h1>Unsung heroes...</h1>
						<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
						<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
					</div>
				</section>
				<section role="complementary">
					<div class="sideBlock overHyped">
						<h1>Overhyped nonsense...</h1>
						<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
						<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
					</div>
				</section>
			</aside>
			<!-- the footer -->
			<footer role="contentinfo">
				<p>
					Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.
				</p>
			</footer>

		</div>
	</body>
</html>